<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的保险卡</title>
<meta name="keywords" content="保单详情，众安保险，互联网保险，网上支付，保单查询，在线理赔，让保险有温度" />
<meta name="description" content="众安保险是国内首家也是唯一一家互联网保险公司，个性化定制风险解决方案，全方位采用互联网先进科技，追求流畅、贴心、温暖的用户体验。" />
<!--统一加载公共js与css文件-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimal-ui,maximum-scale=1.0,user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../image/apple_icon/zhongan_icon_52.png" />  
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../image/apple_icon/zhongan_icon_72.png" />  
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../image/apple_icon/zhongan_icon_114.png" />    
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../image/apple_icon/zhongan_icon_144.png" /> 
<link type="image/x-icon" rel="Shortcut Icon" href="../../image/apple_icon/zhongan_icon_144.png">
<link href="../../css/za-web-common.css" rel="stylesheet">
<link href="../../css/swiper/swiper.min.css" rel="stylesheet">
<link href="../../css/tab-swiper.css" rel="stylesheet">
<script type="text/javascript" src="../../js/form/zepto.min.js"></script>
<script type="text/javascript" src="../../js/web_common.js"></script>
<script type="text/javascript" src="../../js/swiper/swiper.min.js"></script>
</head>
<body>
<div class="card-contain">
	<div class="za-wrap">
	    <div class="tabs">
	        <a href="#" hidefocus="true" class="active">有效</a>
	        <a href="#" hidefocus="true">已使用</a>
	        <a href="#" hidefocus="true">过期</a>
	    </div>    
	    <div class="swiper-container">
	        <div class="swiper-wrapper">
	        <div class="swiper-slide">
	           	<div class="content-slide">
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航延.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyi">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航空意外险保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航意.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-pay">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">无忧pay</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-航意.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div>
	              	<!-- <div class="za-card-box za-card-box-jyb">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">尊享版</p>
					          <p class="txt16 tb">知因保保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;150</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				<div class="zaw-btn-box-room"><a href="激活-知因保.html" class="zaw-btn-dbl">激活</a></div>
	              				<div class="zaw-btn-box-room"><a href="保险卡转赠.html" class="zaw-btn-dbl">转赠</a></div>
	              			</div>
	              		</div>
	             	</div> -->
	          	</div>
	        </div>
	        <div class="swiper-slide">
	        	<div class="content-slide">
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				保障期限：2016年10月28日 至 2017年10月27日
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyan">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				保障期限：2016年10月28日 至 2017年10月27日
	              			</div>
	              		</div>
	             	</div>
	            </div>
			</div>
	        <div class="swiper-slide">
	            <div class="content-slide">
	              	<div class="za-card-box za-card-box-hangyan za-card-box-overdue">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				保障期限：2016年10月28日 至 2017年10月27日
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-hangyi za-card-box-overdue">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">航班延误保险卡</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				保障期限：2016年10月28日 至 2017年10月27日
	              			</div>
	              		</div>
	             	</div>
	              	<div class="za-card-box za-card-box-pay za-card-box-overdue">
	              		<div class="za-card-titleinfo">
					        <div class="za-card-auto tl">
					          <p class="txt12">经典版</p>
					          <p class="txt16 tb">无忧pay</p>
					        </div>
					        <div class="za-card-auto tr">
					          <p class="txt14">&yen;100</p>
					          <p class="txt16 tb"><span class="vb maxNum">7</span>份</p>
					        </div>
	              		</div>
	              		<div class="za-card-title">
	              			<div class="zaw-btn-box">
	              				保障期限：2016年10月28日 至 2017年10月27日
	              			</div>
	              		</div>
	             	</div>
	            </div>
	        </div>
	      </div>
	   </div>
	</div>
</div>
<script>
var tabsSwiper = new Swiper('.swiper-container',{
	speed:500,
	onSlideChangeStart: function(){
		$(".tabs .active").removeClass('active');
		$(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
		var tabH = $(".swiper-slide").eq(tabsSwiper.activeIndex).find(".content-slide").height();
		var wH = $(window).height()-$(".tabs").height();
		if(tabH<wH){
			$(".swiper-container").css("height",wH);
		}else{
			$(".swiper-container").css("height",tabH);
		}
		console.log("当前活动tab页序列号"+tabsSwiper.activeIndex);
  		App.showLoading();
  		setTimeout(function(){
			App.hideLoading();
  		},1000)
	}
});
$(".tabs a").on('touchstart mousedown',function(e){
	e.preventDefault()
	$(".tabs .active").removeClass('active');
	$(this).addClass('active');
	tabsSwiper.slideTo($(this).index());
});

$(".tabs a").click(function(e){
	e.preventDefault();
});
</script>
</body>
</html>